<template>
	<view class="pyq">
		<view class="space-between">
			<view class="p-left" @click="tab(date.userinfo.id)" v-if="date.userinfo">
				<image class="logo" :src="date.userinfo.headimg" mode=""></image>
			</view>
			<view class="p-right">
				<view class="right-top space-between hor-center" >
					<view class="col">
						<view class="flex-start">
							<view class="name text-overflow text-overflow1" v-if="date.userinfo">
								{{date.userinfo.username}}
							</view>
							<view class="self">
								星主
							</view>
						</view>
						<view class="time">
							{{date.create_time}} 阅读人数1
						</view>
					</view>
					<view class="row hor-center">
						<image class="down" src="../../static/svg/down.svg" mode=""></image>
					</view>
				</view>
				<view class="right-text">
					<u-read-more :toggle="true" showHeight="85" textIndent="0" closeText="查看全文" color="#5c819b">
					    <rich-text :nodes="date.content" ></rich-text>
					</u-read-more>
				</view>
				<view class="pt-1" v-if="date.show_img">
					<u-album
					    :urls="urls2"
					    @albumWidth="width => albumWidth = width"
						singleSize=""
					    multipleSize="97"
					></u-album>
				</view>
				<view class="activity">
					<img src="../../static/svg/daka.svg" alt="">
					<view class="act-title bold">
						7天临摹设计挑战
					</view>
				</view>
				<view class="interaction space-between">
					<view class="space-between">
						<u-icon name="thumb-up" size="24" color="#b0b0b0"></u-icon>
						<span>12</span>
					</view>
					<view class="space-between">
						<u-icon name="chat" size="24" color="#b0b0b0"></u-icon>
						<span>12</span>
					</view>
					<u-icon name="share-square" size="24" color="#89d2bc"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pyq-card",
		data() {
			return {
				albumWidth: 0,
				// list:{},
				urls2: [
					'https://img2.baidu.com/it/u=4275878202,4024270494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					'https://img0.baidu.com/it/u=1336331950,1548724862&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					'https://img0.baidu.com/it/u=764288424,2975590343&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 'https://img2.baidu.com/it/u=2176319346,3147073138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 'https://img0.baidu.com/it/u=374761639,2127782042&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					// 'https://cdn.uviewui.com/uview/album/6.jpg',
					// 'https://cdn.uviewui.com/uview/album/7.jpg',
					// 'https://cdn.uviewui.com/uview/album/8.jpg',
					// 'https://cdn.uviewui.com/uview/album/9.jpg',
					// 'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				content:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`
			};
		},
		props:{
			date:Object
		},
		methods:{
			tab(e){
				this.$emit('popup',e)
			}
		}
	}
</script>

<style scoped>
	.pyq {
		padding: 20px 0;
		border-bottom: 1px solid #f4f6f6;
	}

	.p-left {
		width: 8vw;
		margin-right: 1vw;
	}

	.logo {
		width: 8vw;
		height: 8vw;
		margin-top: 1vw;
		border-radius: 50%;
	}

	/*  */
	.p-right {
		width: calc(100% - 38px);
	}

	.right-top {
		height: 40px;
	}
	
	.info {
		width: 40vw;
	}
	
	.name {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0px;
		color: #efbb7b;
		/* width: 100px; */
	}
	
	.self {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0px;
		background-color: #f0aa68;
		border-radius: 2px;
		padding: 2px 4px;
		margin-left: 1vw;
		color: #fff000;
	}

	.time {
		font-family: PingFangSC-Regular;
		font-size: 10px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.3);
	}

	.down {
		width: 12px;
		height: 12px;
		opacity: .2;
	}
	.right-text{
		font-family: PingFangSC-Regular;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.8);
	}
	.pt-1{
		padding-top: 10px;
	}
	
	.activity {
		display: flex;
		width: 35vw;
		height: 5vh;
		margin-top: 2vh;
		border-radius: 1vw;
		background-color: #f4f6f3;
		color: #afbfcf;
		align-items: center;
	}
	.activity img{
		width: 4vw;
		height: 4vh;
		margin: 0 2vw;
	}
	.act-title {
		font-size: 12px;
	}
	.interaction {
		margin-top: 2vh;
		font-size: 12px;
		color: #b0b0b0;
	}
	.interaction view {
		align-items: center;
	}
</style>
